<template>
  <el-drawer
    :append-to-body="true"
    :wrapperClosable="false"
    :title="title"
    size="1200px"
    :visible="open"
    @close="handleClose"
  >
    <div class="drawer_container">
      <div class="title_box">
        <ancestorsNameDeal class="index_name" :text="ancestorsName" :maxLength="!globalDisabled?45:90"></ancestorsNameDeal>
        <div class="top_btns" v-if="!globalDisabled">
          <div @click="addTopic" class="blue_btn">
            <svg-icon class-name="btn_icon" icon-class="add_svg"/>
            手动录入试题
          </div>
          <el-dropdown>
            <div class="green_btn">
              <svg-icon class-name="btn_icon" icon-class="AI_svg"/>
              AI出题
            </div>
            <el-dropdown-menu slot="dropdown">
              <div @click="showAiTopic(1)">
                <el-dropdown-item>基于课程内容</el-dropdown-item>
              </div>
              <div @click="showAiTopic(0)">
                <el-dropdown-item>联网出题</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="mid">
        <el-table
          v-loading="tableLoading"
          height="calc(100vh - 170px)"
          :header-cell-style="tableHeaderStyle"
          :data="tacticsList"
          class="cum_table"
        >
          <el-table-column label="序号" type="index" align="center"></el-table-column>
          <el-table-column label="题型" align="center" prop="topicType">
            <template slot-scope="scope">
              <el-tag>{{ $store.getters.topicTypeText[scope.row.topicType] }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="题干" width="500" align="center" prop="content">
            <template slot-scope="scope">
              <div @click="getByEditor(3,scope.row.content)" :class="{'content_html':$isIncludesHtml(scope.row.content)}"
                   class="line_feed w_fixed overTxt"
              >{{ scope.row.content }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="难度" align="center" prop="difficulty">
            <template slot-scope="scope">
              <el-tag type="success">{{ $store.getters.difficultyText[scope.row.difficulty] }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--  添加/编辑试题抽屉  -->
      <addTopicDrawer @submit="saveTopicByType" enter-type="tactics" :topicType="currentTacticsRow.topicType"
                      :index-id="currentTacticsRow.indexId"
                      :open.sync="showTopicState" :course-id="courseId" :open-type="openTopicType"
      ></addTopicDrawer>
      <!--  AI出题    -->
      <AIoutTopicDrawer :show.sync="showAiDrawer" @updateData="getTacticsInfo" :open-type="showAiType" enterType="随即策略"
                        :topicType="currentTacticsRow.topicType" :index-id="currentTacticsRow.indexId" :course-id="courseId"
      ></AIoutTopicDrawer>
      <!--  编辑弹窗  -->
      <editDrawer title="题干详情" :show.sync="showDrawer" :openType="propOpenType" :propEditorValue="propEditorValue"></editDrawer>
    </div>
  </el-drawer>
</template>

<script>
import addTopicDrawer from './addTopicDrawer'
import AIoutTopicDrawer from './AIoutTopicDrawer'
import editDrawer from '@/views/tea_course/components/editDrawer'
import ancestorsNameDeal from '@/components/ancestorsNameDeal'
import { getTacticsInfoApi, addTopicApi } from '@/api/ExaminationModule'
import { getAncestorsNameApi } from '@/api/course/course'

export default {
  name: 'editContainerDrawer',
  components: {
    addTopicDrawer,
    AIoutTopicDrawer,
    editDrawer,
    ancestorsNameDeal
  },
  props: {
    open: {
      type: Boolean,
      default: false
    },
    globalDisabled: {
      type: [Boolean],
      default: false
    },
    currentTacticsRow: {
      type: [Object],
      default: '',
      request: true
    },
    courseId: {
      type: [Number, String],
      default: ''
    },
    title: {
      type: String,
      default: '随机策略试题列表'
    }
  },
  data() {
    return {
      //富文本录入类型 1：添加 2：编辑 3：查看
      propOpenType: 1,
      //富文本录入抽屉状态
      showDrawer: false,
      //富文本录入组件---内容
      propEditorValue: '',
      ancestorsName: '',
      // AI出题类型  0: "AI出题(联网出题)" 1: "AI出题(基于课程内容)",
      showAiType: 1,
      // AI出题抽屉状态
      showAiDrawer: false,
      //添加/编辑试题抽屉状态
      showTopicState: false,
      //试题抽屉打开类型
      openTopicType: '',

      tableLoading: false,
      tacticsList: [],
      //表头样式
      tableHeaderStyle: {
        'background-color': '#f8f8f9',
        'color': '#333333',
        'font-size': '14px',
        'font-family': 'PingFangSC, PingFang SC',
        'font-weight': '400'
      }
    }
  },
  watch: {
    open(val) {
      if (val) {
        this.getAncestorsName()
        this.getTacticsInfo()
      }
    }
  },
  methods: {
    //富文本录入
    getByEditor(type, Value) {
      if (type == 3 && !this.$isIncludesHtml(Value)) {
        return
      }
      this.propEditorValue = Value
      this.propOpenType = type
      this.showDrawer = true
    },
    async getAncestorsName() {
      try {
        let res = await getAncestorsNameApi(this.currentTacticsRow.indexId)
        const { code, msg } = res
        if (code == 200) {
          this.ancestorsName = msg
        }
      } catch (e) {
        console.error(e)
      }
    },
    showAiTopic(type) {
      this.showAiType = type
      this.showAiDrawer = true
    },
    saveTopicByType(e) {
      if (this.openTopicType === 'add') {
        this.addTacticsTopic(e)
      }
    },
    //添加试题
    async addTacticsTopic(e) {
      const loading = this.$loading({
        lock: true,
        text: '正在添加...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      try {
        let res = await addTopicApi(e)
        const { code } = res
        if (code == 200) {
          this.getTacticsInfo()
        }
      } catch (e) {
        console.error(e)
      } finally {
        loading.close()
      }
    },
    //关闭抽屉
    handleClose() {
      this.$emit('update:open', false)
      this.$emit('refresh', this.currentTacticsRow)
    },
    //添加题目
    addTopic() {
      this.showTopicState = true
      this.openTopicType = 'add'
    },
    async getTacticsInfo() {
      this.tableLoading = true
      try {
        const res = await getTacticsInfoApi(this.currentTacticsRow.topicType, this.currentTacticsRow.indexId, this.currentTacticsRow.titleId)
        const { code, data } = res
        if (code == 200) {
          this.tacticsList = data.topicList
        }
      } catch (e) {
        console.error(e)
      } finally {
        this.tableLoading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/styles/mixin.scss";

.drawer_container {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;

  .title_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;

    .index_name {
      font-family: PingFangSC, PingFang SC, sans-serif;
      font-weight: 500;
      font-size: 16px;
      color: #333333;
    }

    .top_btns {
      display: flex;
      align-items: center;
      gap: 0 16px;

      .blue_btn {
        @include plain_hover(#F3FAFF, #1677FF, #ffffff) {
          width: 130px;
          height: 32px;
          border-radius: 8px;
          border: 1px solid #1677FF;
          gap: 0 4px;
        }
      }

      .orange_btn {
        @include plain_hover(#FFF8EE, #E6A23B, #ffffff) {
          width: 130px;
          height: 32px;
          border-radius: 8px;
          border: 1px solid #E6A23B;
          gap: 0 4px;
        }
      }

      .green_btn {
        @include plain_hover(#ECFFFA, #28B28B, #ffffff) {
          width: 88px;
          height: 32px;
          border-radius: 8px;
          border: 1px solid #28B28B;
          gap: 0 4px;
        }
      }

      .danger_btn {
        @include plain_hover(#FFEEEE, #E95756, #ffffff) {
          width: 102px;
          height: 32px;
          border-radius: 8px;
          border: 1px solid #F99999;
          gap: 0 4px;
        }
      }
    }
  }

  .mid {
    margin-top: 20px;

    .cum_table {
      width: 100%;
      border-radius: 8px;
      border: 1px solid #E8EAEB;

      .icon_box {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 8px;
      }
    }

    ::v-deep .el-table:before {
      height: 0;
    }
  }
}

.color_hover {
  &:hover {
    color: #28b28b;
  }
}

.content_html {
  position: relative;
  cursor: pointer;
  height: 100%;

  &:hover {
    user-select: none;

    &:after {
      content: '预览';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      color: #ffffff;
      background: rgba(0, 0, 0, .2);
    }
  }
}

.w_fixed {
  width: 100%;
}
</style>
